<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue.draggable add例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style scoped>
        .itxst {
            margin: 10px;
            text-align: left;
        }

        .col {
            width: 40%;
            flex: 1;
            padding: 10px;
            border: solid 1px #eee;
            border-radius: 5px;
            float: left;
        }

        .col+.col {
            margin-left: 10px;
        }

        .item {
            padding: 6px 12px;
            margin: 0px 10px 0px 10px;
            border: solid 1px #eee;
            background-color: #f1f1f1;
            text-align: left;
        }

        .item+.item {
            border-top: none;
            margin-top: 6px;
        }

        .item:hover {
            background-color: #fdfdfd;
            cursor: move;
        }

        .item2 {
            padding: 6px 12px;
            margin: 0px 10px 0px 10px;
            border: solid 1px #eee;
            background-color: pink;
            text-align: left;
        }

        .item2+.item2 {
            border-top: none;
            margin-top: 6px;
        }

        .item2:hover {
            outline: solid 1px #ddd;
            cursor: move;
        }

        html {
            font-family: sans-serif;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body {
            margin: 10px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        td,
        th {
            padding: 0;
        }

        .pure-table {
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #cbcbcb;
        }

        .pure-table caption {
            color: #000;
            font: italic 85%/1 arial, sans-serif;
            padding: 1em 0;
            text-align: center;
        }

        .pure-table td,
        .pure-table th {
            border-left: 1px solid #cbcbcb;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            padding: .5em 1em;
        }

        .pure-table thead {
            background-color: #e0e0e0;
            color: #000;
            text-align: left;
            vertical-align: bottom;
        }

        .pure-table td {
            background-color: transparent;
        }

        .pure-table-horizontal td,
        .pure-table-horizontal th {
            border-width: 0 0 1px 0;
            border-bottom: 1px solid #cbcbcb;
        }

        .pure-table-horizontal tbody>tr:last-child>td {
            border-bottom-width: 0;
        }
    </style>
</head>

<body style="padding:10px;">
    <div id="app">
        <div class="itxst">
            <div style="padding-left:10px">add事件例子,左边往右边拖动试试看</div>
            <div class="col menu" ref="menu">
                <div :class="item.id==1?'item forbid':'item'" v-for="item in arr1" :key="item.id">{{item.name}}
                </div>
            </div>
            <div class="col">
                <table ref="atable" class="pure-table pure-table-horizontal">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Make</th>
                            <th>Model</th>
                            <th>Year</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(item,index) in tableData" :key="item.date">
                            <td>
                                <div>{{index}}</div>
                            </td>
                            <td v-for="val in item" :key="val">
                                <div>{{val}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="mou" style="width: 215px;height: 138px;">
                <img src="https://img1.itxst.com/9/3/9362a067ad1ad78aa693981c0d518202.png" alt="">
            </div>
        </div>
    </div>
    <script>
        // 全局注册组件
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    //定义要被拖拽对象的数组
                    arr1: [
                        { id: 1, name: "www.itxst.com" },
                        { id: 2, name: "www.jd.com" },
                        { id: 3, name: "www.baidu.com" },
                        { id: 5, name: "www.google.com" },
                        { id: 4, name: "www.taobao.com" }
                    ],
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }]
                }
            },
            mounted() {
                // console.log(this.$refs, '/ref')
                this.initSortable()
                this.initSortable1()
            },
            methods: {
                // 初始化 sortable 实现拖动
                initSortable() {
                    var that = this
                    var el = this.$el.querySelector('.menu')
                    this.menuchild(el)
                    Sortable.create(el, {
                        handle: '.item',
                        animation: 150,
                        group: { name: 'shared', pull: 'clone', put: true },
                        onUpdate: function (evt) {

                        },
                        onEnd: evt => {
                            let { to: {
                                cellIndex,
                                parentNode: { sectionRowIndex },

                            } } = evt
                            // console.log("左侧拖拽结束目标位置",'(第'+sectionRowIndex+'行,第'+cellIndex+'列)');
                        }
                    })
                },
                initSortable1() {
                    var that = this
                    // var el = this.$el.querySelector('.el-table tbody')
                    // debugger
                    const children = document.querySelector(
                        `.pure-table tbody`
                    ).children;
                    // debugger
                    // 给每一行添加列表拖拽，实现单元格拖拽
                    for (let index = 0; index < children.length; index++) {
                        let f = children.item(index).children
                        // debugger
                        for (let tidx = 0; tidx < f.length; tidx++) {
                            // console.log(index,'/index')
                            // console.log(tidx,'/tidx')
                            tr()
                            // debugger
                            function tr(params) {
                                let trIndex = index
                                let e = f.item(tidx)
                                e.setAttribute('tridx', trIndex)
                                e.setAttribute('tdidx', tidx)
                                return Sortable.create(e, {
                                    group: {
                                        name: "shared", // 定义为可列表间拖拽
                                        pull: true, put: true
                                    },
                                    swap: false, // 交换属性
                                    // filter: ".filtered", // 过滤不能拖拽
                                    onStart: evt => {
                                        console.log(evt, '/开始拖拽')
                                    },
                                    onEnd: evt => {
                                        console.log("onEnd", evt, '(第' + trIndex + '行,第' + tidx + '列)');
                                        let fromTridx = evt.from.attributes.tridx
                                        let fromTdidx = evt.from.attributes.tdidx
                                        let toTridx = evt.to.attributes.tridx
                                        let toTdidx = evt.to.attributes.tdidx
                                        // 判断是否在一个单元格拖动
                                        if (fromTridx == toTridx && fromTdidx == toTdidx) {
                                            // 在一个单元格内
                                            console.log(evt.oldIndex, '/拖拽之前的位置')
                                            console.log(evt.oldIndex, '/拖拽以后的位置')
                                        } else {

                                        }
                                        // 更新数据，这里暂时直接通过交换数据来拖拽，实际情况是会通过接口更新再拉取列表实现
                                        // this.updateData({
                                        //     oldRowIndex: evt.from.rowIndex,
                                        //     newRowIndex: evt.to.rowIndex,
                                        //     oldColumnIndex: evt.oldIndex,
                                        //     newColumnIndex: evt.newIndex
                                        // });
                                    }
                                });
                            }
                        }

                        // const el = children.item(index).children;
                        // debugger
                        // Sortable.create(el, {
                        //     group: {
                        //         name: "shared", // 定义为可列表间拖拽
                        //         pull: true, put: true
                        //     },
                        //     swap: true, // 交换属性
                        //     filter: ".filtered", // 过滤不能拖拽
                        //     onEnd: evt => {
                        //         console.log("onEnd", evt);
                        //         // 更新数据，这里暂时直接通过交换数据来拖拽，实际情况是会通过接口更新再拉取列表实现
                        //         // this.updateData({
                        //         //     oldRowIndex: evt.from.rowIndex,
                        //         //     newRowIndex: evt.to.rowIndex,
                        //         //     oldColumnIndex: evt.oldIndex,
                        //         //     newColumnIndex: evt.newIndex
                        //         // });
                        //     }
                        // });
                    }
                },
                menuchild(el) {
                    console.log(el.children, 'laaaaaaa')
                    for (let i = 0; i < el.children.length; i++) {
                        el.children[i].addEventListener("mousedown", mouseDown)
                    }
                    function mouseDown(e1) {
                        let mouseX = e1.clientX;
                        let mouseY = e1.clientY;
                        let mouDom = document.getElementById('mou')
                        mouDom.style.position = 'fixed';
                        console.log(mouseX, mouseY)

                        // //抬起停止拖动
                        // document.onmouseup = function () {
                        //     document.onmousemove = null;
                        //     document.onmouseup = null;

                        // }
                        document.addEventListener('mousemove', mouseMove)
                        document.addEventListener('mouseup', stop)
                        function mouseMove(e2) {
                            console.log("移动")
                            mouDom.style.left = e2.clientX + 20 + 'px';
                            mouDom.style.right = e2.clientY + 20 + 'px';
                        }
                        function stop(envet) {
                            document.removeEventListener('mousemove', mouseMove);
                            document.removeEventListener('mouseup', stop);
                        }
                        return false;
                    }
                    // e1.preventDefault();
                }
            }
        });
        // function dragable(id) { 
        //     var d = document, 
        //         o = d.getElementById(id), 
        //         s = o.style, 
        //         x, 
        //         y, 
        //         p = 'onmousemove'; 
        //     o.onmousedown = function (e) { 
        //         e = e || event; 
        //         x = e.clientX - o.offsetLeft; 
        //         y = e.clientY - o.offsetTop; 
        //         d[p] = function (e) { 
        //             e = e || event; 
        //             s.left = e.clientX - x + 'px'; 
        //             s.top = e.clientY - y + 'px' 
        //         }; 
        //         d.onmouseup = function () { 
        //             d[p] = null } 
        //         } 
        //     }
        // dragable("demo");
    </script>
</body>

</html>